<template>
  <div class="interactive-map" ref="mapContainer">
    <!-- 地图模式切换按钮 -->
    <div class="map-mode-controls">
      <button 
        class="mode-btn" 
        :class="{ active: mapMode === '2d' }" 
        @click="switchMapMode('2d')"
        title="2D地图视图"
      >
        <svg viewBox="0 0 24 24">
          <path d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" fill="currentColor"/>
        </svg>
        <span>2D</span>
      </button>
      <button 
        class="mode-btn" 
        :class="{ active: mapMode === '3d' }" 
        @click="switchMapMode('3d')"
        title="3D地图视图"
      >
        <svg viewBox="0 0 24 24">
          <path d="M5.39,19L6.43,16H9.57L10.61,19H12.42L9.1,10H6.9L3.58,19H5.39M6.82,14L8,10.8L9.18,14H6.82M11,19V17H13V19H11M15,19V13H17V15H19V17H17V19H15M19,13V11H15V13H17V13H19M21,3V21H3V3H21M19,5H5V19H19V5Z" fill="currentColor"/>
        </svg>
        <span>3D</span>
      </button>
    </div>

    <!-- 2D地图视图 -->
    <div v-if="mapMode === '2d'" class="map-2d-container">
      <!-- 2D背景层 -->
      <div class="map-background">
        <!-- 观音湖轮廓SVG -->
        <svg class="lake-outline" viewBox="0 0 160 80" preserveAspectRatio="none">
          <defs>
            <linearGradient id="lakeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#1976d2;stop-opacity:0.6" />
              <stop offset="50%" style="stop-color:#4a90e2;stop-opacity:0.8" />
              <stop offset="100%" style="stop-color:#1976d2;stop-opacity:0.6" />
            </linearGradient>
            <filter id="ripple">
              <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
            </filter>
          </defs>
          
          <!-- 观音湖轮廓 - 基于真实地理形状 -->
          <path 
            d="M 20,40 
               Q 30,35 45,38
               Q 60,35 80,40
               Q 100,38 120,42
               Q 140,40 150,45
               L 148,50
               Q 145,55 140,52
               Q 120,58 100,55
               Q 80,60 60,55
               Q 40,58 25,52
               Q 18,48 20,40 Z"
            fill="url(#lakeGradient)"
            filter="url(#ripple)"
            class="lake-surface"
          />
          
          <!-- 三圣岛 - 湖中最大岛屿 -->
          <ellipse cx="80" cy="47" rx="6" ry="4" fill="#2e5c2e" opacity="0.8" class="island"/>
          
          <!-- 小岛屿 -->
          <ellipse cx="110" cy="50" rx="3" ry="2" fill="#2e5c2e" opacity="0.6" class="island"/>
          <ellipse cx="50" cy="45" rx="2" ry="1.5" fill="#2e5c2e" opacity="0.6" class="island"/>
          
          <!-- 湖心公园绿地 -->
          <path 
            d="M 75,42 Q 85,40 90,45 Q 88,50 80,52 Q 70,50 75,42 Z"
            fill="#4a7c59" 
            opacity="0.7"
            class="park-area"
          />
          
          <!-- 观音湖大桥 -->
          <line x1="60" y1="35" x2="100" y2="58" stroke="#666" stroke-width="1.5" opacity="0.8"/>
          
          <!-- 湖岸线细节 -->
          <path 
            d="M 20,40 Q 25,35 30,38"
            stroke="#1565c0" 
            stroke-width="0.5" 
            fill="none" 
            opacity="0.6"
          />
          <path 
            d="M 140,42 Q 145,38 150,45"
            stroke="#1565c0" 
            stroke-width="0.5" 
            fill="none" 
            opacity="0.6"
          />
          
          <!-- 湖面涟漪动画 -->
          <circle cx="70" cy="45" r="2" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.3">
            <animate attributeName="r" values="2;8;2" dur="4s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.3;0;0.3" dur="4s" repeatCount="indefinite"/>
          </circle>
          <circle cx="90" cy="50" r="1.5" fill="none" stroke="#ffffff" stroke-width="0.3" opacity="0.2">
            <animate attributeName="r" values="1.5;6;1.5" dur="3s" repeatCount="indefinite" begin="1s"/>
            <animate attributeName="opacity" values="0.2;0;0.2" dur="3s" repeatCount="indefinite" begin="1s"/>
          </circle>
        </svg>
        
        <!-- 山体轮廓 -->
        <div class="mountain-silhouette lingquan-mountain"></div>
        <div class="mountain-silhouette guangde-mountain"></div>
      </div>

      <!-- POI标记层 -->
      <div class="poi-layer">
        <PoiMarker
          v-for="poi in currentFilteredPois"
          :key="poi.id"
          :poi="poi"
          :is-active="selectedPoi?.id === poi.id"
          @click="handlePoiClick"
          @hover="handlePoiHover"
        />
      </div>

      <!-- 悬浮信息提示 -->
      <InfoTooltip
        v-if="hoveredPoi"
        :poi="hoveredPoi"
        :position="tooltipPosition"
      />

      <!-- 详细信息弹窗 -->
      <DetailPopup
        v-if="selectedPoi"
        :poi="selectedPoi"
        :active-type="activeType"
        @close="handlePopupClose"
      />
    </div>

    <!-- 3D地图视图 -->
    <div v-else-if="mapMode === '3d'" class="map-3d-container">
      <Map3D 
        :filtered-pois="currentFilteredPois"
        :selected-poi-type="selectedPoiType"
        @poi-hover="handlePoiHover"
        @poi-click="handlePoiClick"
      />
    </div>

    <!-- 实时统计覆盖层 -->
    <div class="stats-overlay">
      <div class="realtime-stats">
        <div class="stat-item">
          <span class="stat-value">{{ realtimeStats.totalVisitors }}</span>
          <span class="stat-label">实时在园</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ realtimeStats.activePois }}</span>
          <span class="stat-label">活跃{{ getActiveTypeText() }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ realtimeStats.alertCount }}</span>
          <span class="stat-label">预警信息</span>
        </div>
      </div>
    </div>

    <!-- POI类型过滤器 -->
    <div class="poi-filter-panel">
      <h4>POI类型筛选</h4>
      <div class="filter-controls">
        <label class="filter-item">
          <input 
            type="checkbox" 
            :checked="activeType === 'all'"
            @change="handleFilterChange('all')"
          />
          <span>全部显示</span>
        </label>
        <label class="filter-item" v-for="type in poiTypes" :key="type.id">
          <input 
            type="checkbox" 
            :checked="activeType === type.id || activeType === 'all'"
            @change="handleFilterChange(type.id)"
          />
          <span>{{ type.name }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import PoiMarker from './PoiMarker.vue'
import InfoTooltip from './InfoTooltip.vue'
import DetailPopup from './DetailPopup.vue'
import Map3D from './Map3D.vue'
import { poiData } from './poiData.js'

const props = defineProps({
  activeType: {
    type: String,
    default: 'all'  // 默认显示所有POI
  },
  selectedPoiType: {
    type: String,
    default: 'all'
  },
  mapMode: {
    type: String,
    default: '2d'
  }
})

const emit = defineEmits(['poi-selected', 'stats-updated', 'mapModeChanged'])

const mapContainer = ref(null)
const hoveredPoi = ref(null)
const selectedPoi = ref(null)
const tooltipPosition = ref({ x: 0, y: 0 })
const selectedPoiType = ref(props.selectedPoiType)
const mapMode = ref(props.mapMode) // 创建本地地图模式状态

// POI类型定义
const poiTypes = ref([
  { id: 'scenic', name: '景区景点' },
  { id: 'monitor', name: '视频监控' },
  { id: 'entrance', name: '出入口' },
  { id: 'hotel', name: '住宿' },
  { id: 'restaurant', name: '餐饮' },
  { id: 'service', name: '公共服务' },
  { id: 'business', name: '商业' }
])

// 实时统计数据
const realtimeStats = ref({
  totalVisitors: 2568,
  activePois: poiData.length, // 显示所有POI数量
  alertCount: poiData.filter(poi => poi.isAlert).length
})

// 根据激活类型过滤POI - 默认显示所有
const visiblePois = computed(() => {
  if (props.activeType === 'all') {
    return poiData
  }
  return poiData.filter(poi => poi.type === props.activeType)
})

// 获取当前类型的文本
const getActiveTypeText = () => {
  if (props.activeType === 'all') {
    return 'POI'
  }
  
  const typeMap = {
    scenic: '景点',
    monitor: '监控',
    entrance: '出入口',
    hotel: '住宿',
    restaurant: '餐饮',
    service: '服务',
    business: '商业'
  }
  return typeMap[props.activeType] || '项目'
}

// 计算属性
const currentFilteredPois = computed(() => {
  if (props.selectedPoiType === 'all') {
    return poiData
  }
  return poiData.filter(poi => poi.type === props.selectedPoiType)
})

// 地图切换方法
const switchMapMode = (mode) => {
  mapMode.value = mode
  emit('mapModeChanged', mode)
}

// 处理POI过滤变化
const handleFilterChange = (type) => {
  emit('poi-selected', { type })
}

// 处理标记悬浮
const handlePoiHover = (poi, event) => {
  hoveredPoi.value = poi
  if (event && mapContainer.value) {
    const rect = mapContainer.value.getBoundingClientRect()
    tooltipPosition.value = {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    }
  }
}

// 处理标记点击
const handlePoiClick = (poi) => {
  selectedPoi.value = poi
  emit('poi-selected', poi)
}

// 处理标记离开
const handleMarkerLeave = () => {
  hoveredPoi.value = null
}

// 处理弹窗关闭
const handlePopupClose = () => {
  selectedPoi.value = null
}

// 监听活跃类型变化
watch(() => props.activeType, (newType) => {
  hoveredPoi.value = null
  selectedPoi.value = null
  
  // 更新统计数据
  updateStats(newType)
})

// 更新统计数据
const updateStats = (type) => {
  if (type === 'all') {
    realtimeStats.value.activePois = poiData.length
    realtimeStats.value.alertCount = poiData.filter(poi => poi.isAlert).length
  } else {
    const typePois = poiData.filter(poi => poi.type === type)
    realtimeStats.value.activePois = typePois.length
    realtimeStats.value.alertCount = typePois.filter(poi => poi.isAlert).length
  }
  
  emit('stats-updated', realtimeStats.value)
}

// 模拟实时数据更新
onMounted(() => {
  // 初始统计
  updateStats(props.activeType)
  
  // 定时更新游客数量
  setInterval(() => {
    realtimeStats.value.totalVisitors += Math.floor(Math.random() * 10 - 5)
    if (realtimeStats.value.totalVisitors < 2400) realtimeStats.value.totalVisitors = 2400
    if (realtimeStats.value.totalVisitors > 2800) realtimeStats.value.totalVisitors = 2800
  }, 8000)
})

// 监听外部POI类型变化
watch(() => props.selectedPoiType, (newType) => {
  selectedPoiType.value = newType
})

// 监听外部模式变化
watch(() => props.mapMode, (newMode) => {
  if (newMode && newMode !== mapMode.value) {
    mapMode.value = newMode
  }
})
</script>

<style scoped>
.interactive-map {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.interactive-map:active {
  cursor: grabbing;
}

/* 地图模式控制 */
.map-mode-controls {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  display: flex;
  gap: 0.5rem;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 8px;
  color: #00ff88;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  min-width: 60px;
}

.mode-btn:hover,
.mode-btn.active {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.mode-btn svg {
  width: 20px;
  height: 20px;
}

.mode-btn span {
  font-size: 0.8rem;
  font-weight: 600;
}

/* 2D地图样式 */
.map-2d-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.lake-outline {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 观音湖水域 */
.lake-surface {
  position: absolute;
  top: 30%;
  left: 25%;
  right: 15%;
  bottom: 25%;
  background: linear-gradient(135deg, 
    rgba(0, 188, 212, 0.15) 0%, 
    rgba(0, 151, 167, 0.10) 100%);
  border-radius: 50% 60% 45% 55%;
  border: 2px solid rgba(0, 188, 212, 0.3);
  animation: waterFlow 8s ease-in-out infinite;
}

@keyframes waterFlow {
  0%, 100% { 
    border-radius: 50% 60% 45% 55%;
    transform: scale(1);
  }
  50% { 
    border-radius: 55% 45% 60% 50%;
    transform: scale(1.02);
  }
}

/* 山体轮廓 */
.mountain-silhouette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.lingquan-mountain {
  top: 15%;
  left: 35%;
  width: 25%;
  height: 20%;
}

.guangde-mountain {
  top: 45%;
  left: 40%;
  width: 20%;
  height: 15%;
}

/* 3D地图样式 */
.map-3d-container {
  width: 100%;
  height: 100%;
}

.poi-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.stats-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 90;
}

.realtime-stats {
  display: flex;
  gap: 1rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  padding: 0.8rem;
  backdrop-filter: blur(5px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 60px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* POI过滤面板 */
.poi-filter-panel {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 12px;
  padding: 1rem;
  backdrop-filter: blur(10px);
  z-index: 90;
  max-width: 200px;
}

.poi-filter-panel h4 {
  color: #00ff88;
  margin: 0 0 0.8rem 0;
  font-size: 0.9rem;
  text-align: center;
}

.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.filter-item:hover {
  color: #00ff88;
}

.filter-item input[type="checkbox"] {
  accent-color: #00ff88;
  cursor: pointer;
}

.filter-item span {
  user-select: none;
}

/* 响应式设计 */
@media screen and (max-width: 1400px) {
  .mode-btn {
    padding: 0.5rem 0.6rem;
    min-width: 50px;
  }
  
  .mode-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .mode-btn span {
    font-size: 0.7rem;
  }
  
  .realtime-stats {
    gap: 0.8rem;
    padding: 0.6rem;
  }
  
  .stat-item {
    min-width: 50px;
  }
  
  .stat-value {
    font-size: 1rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  .poi-filter-panel {
    padding: 0.8rem;
    max-width: 180px;
  }
  
  .filter-item {
    font-size: 0.75rem;
  }
}
</style> 